<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的积分</title>
  <!-- Bootstrap -->
  <link href="css/bootstrap-4.0.0.css" rel="stylesheet">
</head>

<body>
<div th:insert="fragment/header :: top-header"></div>
<hr>
<div class="alert-danger text-center">
  <P class="card-text">积分信息查询</p>
</div>
<div class="container">
  <div class="row text-center"> </div>
  <hr>
  <div class="row card-header">积分信息</div>
  <div class="container">
    <div class="row">
      <div class="col-4 bg-aqua">
        <p>
        <ul class="list-inline">
          <li class="list-inline-item">可用积分</li>
        </ul>
        </p>
      </div>
      <div class="col-4 bg-lemonchiffon">
        <div class="form-group">
          <label th:text="${point_info.user_point}"></label>
        </div>
      </div>
      <div class="col-4 bg-lemonchiffon"></div>
    </div>
    <br>
    <div class="row card-header">搜索条件</div>
    <div class="row">
      <div class="col-2 bg-aqua">
        <p>
        <ul class="list-inline">
          <li class="list-inline-item">发生日期</li>
        </ul>
        </p>
      </div>
      <div class="col-3 bg-lemonchiffon">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="2010-09-22">
        </div>
      </div>
      <div class="col-1 bg-lemonchiffon">
        <div class="form-group text-center">
          <label>~</label>
        </div>
      </div>
      <div class="col-3 bg-lemonchiffon">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="2010-10-21">
        </div>
      </div>
      <div class="col-3 bg-lemonchiffon">
        <a class="btn btn-info btn-lg" href="#" role="button">搜索</a>
      </div>
    </div>
    <br>
    <div class="row card-header">赚取积分查询</div>
    <div class="row">
      <table class="table table-striped">
        <thead>
        <tr>
          <th>区分</th>
          <th>发生日期和时间</th>
          <th>点数</th>
          <th>年份和月份</th>
          <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>本人</td>
          <td>2020-09-22 10:11:24</td>
          <td>50</td>
          <td>2020-09</td>
          <td>完成</td>
        </tr>
        <tr>
          <td>本人</td>
          <td>2020-10-01 15:39:24</td>
          <td>350</td>
          <td>2020-10</td>
          <td>完成</td>
        </tr>
        <tr>
          <td>本人</td>
          <td>2020-10-15 10:00:35</td>
          <td>21</td>
          <td>2020-10</td>
          <td>完成</td>
        </tr>
        <tr>
          <td>家族</td>
          <td>2020-10-16 14:35:35</td>
          <td>2000</td>
          <td>2020-12</td>
          <td>未完成</td>
        </tr>
        <tr>
          <td>家族</td>
          <td>2020-10-20 20:05:00</td>
          <td>1000</td>
          <td>2020-10</td>
          <td>完成</td>
        </tr>
        </tbody>
      </table>
    </div>
    <hr>
    <div class="text-center">
      <div class="custom-control custom-radio custom-control-inline">
        <p class="lead"> <a class="btn btn-danger btn-lg" href="/userInfo" role="button">返回</a> </p>
      </div>
    </div>
    <div class="row">
      <div class="text-center col-lg-6 offset-lg-3">
        <p>Copyright &copy; H &middot; All Rights Reserved &middot;</p>
      </div>
    </div>
  </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</body>

</html>